body{
    background: url("../img/bj.jpg") no-repeat center center;
}
h1{
	position: relative;
	text-align: center;
	line-height: 80px;
	width: 200px;
	height: 80px;
	font-size: 1px;
	border: 2px solid;
	margin:0 auto;
    box-shadow:3px 3px 1px 1px #000;
}
div{
	width: 100px;
	height: 20px;
	font-size: 1px;
	display: grid;
	place-items: center;
	position: relative;
	top: calc(var(--i)*10px);
	animation: mymove 1s ease calc(var(--i)*0.1s) forwards;
	border: 2px solid;
}

div:nth-child(2)::before,
div:nth-child(3)::before,
div:nth-child(4)::before,
div:nth-child(5)::before{
	position: absolute;
	left: -8px;
	color: #fff;
	display: block;
	font-size: 20px;
	font-family:STHupo;
	-webkit-text-stroke:1px #000;
}

div:nth-child(2)::before {
	content: 'A';
}

div:nth-child(3)::before {
	content: 'B';
}

div:nth-child(4)::before {
	content: 'C';
}

div:nth-child(5)::before {
	content: 'D';
}

@keyframes mymove {
	from {
		left: 3.75rem;
	}
	to {
		left: calc(46.5% - 1.085rem);
	}
}
